import DialogStore from ".";
import { action, observable } from "mobx";
import { WeaForm } from 'comsMobx';
import { Button } from 'antd';
import { template } from "../../apis/excelTemplate";
import { ExcelTemplateViewUrl } from "../../constants/excelTemplate";
import route from "../../constants/route";
import {WeaLocaleProvider} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

export default class AddExcelTemplateStore extends DialogStore {
    @observable form = new WeaForm();
    @observable imgEditorVisible = false;
    @observable fileDatas = [];
    constructor() {
        super();
        this.title = getLabel('502864','新建Excel模板');
        this.style = { width: 720, height: 520 };
        this.form.add('', { key: 'id' });
        this.form.add('', { key: 'name' });
        this.form.$('name').set('label', getLabel(502690,'名称'));
        this.form.add('', { key: 'groupName' });
        this.form.$('groupName').set('label', getLabel(502705,'分组'));
        this.form.add('', { key: 'excelFile' });
        this.form.$('excelFile').set('label', getLabel(502706,'选择Excel文件'));
        this.form.add('', { key: 'excelFileName' });
        this.form.add('', { key: 'img' });
        this.form.$('img').set('label', getLabel(502707,'预览图片'));
        this.hasScroll = true;
        this.buttons = [<Button key="cancel" type="primary" onClick={this.hide}>{getLabel(31129,'取消')}</Button>,
        <Button key="save" type="primary" onClick={this.save}>{getLabel(30986,'保存')}</Button>];
    }
    @action init = ({ groupNameOptions, onSave, id }) => {
        this.onSave = onSave;
        const field = this.form.$('groupName');
        field.set('options', groupNameOptions);
        if (id) {
            this.title = getLabel('502865','编辑Excel模板');
            template(id).then(this.setTemplate)
        }
    }
    @action setTemplate = (template) => {
        if (template) {
            let fileName = template.fileName || template.name;
            if (fileName.substr(-5, 5) !== '.xlsx') {
                fileName += '.xlsx';
            }
            window.form = this.form
            this.form.$('id').set(template.id);
            this.form.$('name').set(template.name);
            this.form.$('groupName').set(template.groupName);
            this.form.$('excelFile').set(template.json);
            this.form.$('excelFileName').set(fileName);
            const url = `${ExcelTemplateViewUrl}#/${route.excelTemplateView}?id=${template.id}`;
            this.fileDatas = [{
                fileid: template.id,
                filename: fileName,
                filelink: url,
                fileExtendName: "xlsx",
                filelink: url,
                imgSrc: "",
                isImg: "",
                loadlink: url,
            }];
            this.form.$('img').set(template.img);
        }
    }
    @action save = () => {
        this.onSave(this.form.values());
    }
    @action changeNameWhenEmpty = (newValue) => {
        const field = this.form.$('name');
        const value = field.values();
        if (!value) {
            field.set(newValue);
        }
        this.form.$('excelFileName').set(newValue);
        this.fileDatas = [];
    }
    @action showImgEditor = () => {
        this.imgEditorVisible = true;
    }
    @action hideImgEditor = () => {
        this.imgEditorVisible = false;
    }
}